<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./回车发布品论style.css">
</head>
<body>
    <div class="wapper">
        <i class="avatar"></i>
        <textarea  id="tx" placeholder="良语识知己，恶语伤人心" rows="2" maxlength="200px"></textarea>
        <button>发布</button>
    </div>
    <div class="wapper">
        <span class="total">0/200字</span>
    </div>
    <div class="list">
        <div class="item" style="display: none;">
            <i class="avatar"></i>
            <div class="info">
                <p class="name">一苇渡江</p>
                <p class="text">你好</p>
                <p class="time">2005年</p>
            </div>
        </div>
    </div>
    <script>
        // 1.当我们获得焦点，就显示total
        const tx=document.querySelector('#tx')
        const total=document.querySelector('.total')
        const item=document.querySelector('.item')
        const text=document.querySelector('.text')
        const time=document.querySelector('.time')
        tx.addEventListener('focus',function(){
            total.style.opacity=1
        })
        // 失去焦点
        tx.addEventListener('blur',function(){
            total.style.opacity=0
        })
        // 检测用户输入
        tx.addEventListener('input',function(){
            total.innerHTML=`${tx.value.length}/200字`
        })
        //回车发布
        tx.addEventListener('keyup',function(e){
            if(e.key==='Enter'){
               if(tx.value.trim()!==''){
                item.style.display='block'
                text.innerHTML=tx.value
                total.innerHTML=`0/200字`
               }
                tx.value=''
            }
        })
        function Time(){
                const now=new data()
                const year=now.getfullyear()
                const month=String(now.getmonth()+1).padStart(2,'0')
                const day=String(now.getdata()).padStart(2,'0')
                const hour=String(now.gethours()).padStart(2,'0')
                const minute=String(now.getmonths()).padStart(2,'0')
                const second=String(now.getseconds()).padStart(2,'0')
                time.innerHTML=`${year}年${month}月${day}日${hour}时${minute}分${second}秒`
            }
            Time()
            setInterval(time,1000)
    </script>
</body>
</html>